{% extends 'base.html' %}

{% block style %}
    table{
        margin: 0 auto;
        margin-top:20px;
        width: 800px;
    }
    th{
        border: solid #666 1px;
    }
    td{
        border: solid #666 1px;
        text-align: center;
    }
    .page-link{
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
    .page-link a{
        margin:0 5px;
        border: solid #999 1px;
        text-decoration: none;
        display: inline-block;
        width: 20px;
        height: 30px;
    }
{% endblock style %}

{% block head %}
    <title>班级管理</title>
{% endblock head %}

{% block right %}
    <table>
        <tr>
            <th>班级名称</th>
            <th>开班日期</th>
            <th>当前进度</th>
            <th>授课老师</th>
            <th>备注信息</th>
            <th>操作</th>
        </tr>
        {% for i in classes %}
            <tr>
                <td name="clsname">{{ i.name }}</td>
                <td name="start">{{ i.start|date:"Y-m-d" }}</td>
                <td name="progress">{{ i.progress }}</td>
                {% load mytags %}  {# 模版语言使用函数时需要引入 #}
                <td>
                    {% for j in i.teacher_set|getall %} {# 通过管道符使用all()方法 #}
                        {{ j.name }}    {# 将获取的每一个元素显示在表格中 #}
                    {% endfor %}
                </td>
                <td name="remark">{{ i.remark }}</td>
                <td>
                    <a class="edit" style="cursor: pointer;">编辑</a> | <a class="del" style="cursor: pointer;">删除</a>
                </td>
            </tr>
        {% endfor %}
    </table>
    <div class="page-link" style="margin-top: 10px;">
        {{ pagenum|safe }}
    </div>
{% endblock right %}

{% block dialog %}
    <div id="input-box" class="hide" style="margin-top: 20px;">
        <p>班级名称<input name="clsname"></p>
        <p>开班日期<input name="start"></p>
        <p>当前进度<input name="progress"></p>
        <p>备注信息<input name="remark"></p>
        <p style="margin-right: 127px;">
            <span style="vertical-align: top">授课老师</span>
            <select name="teachers" multiple="multiple"></select>
        </p>
    </div>

    <div id="bt-box" class="hide" style="margin-top: 20px;">
        <button name='confirm' style="height: 40px;width: 80px;margin-right: 50px;">确定</button>
        <button name='cancle' style="height: 40px;width: 80px;">取消</button>
    </div>
{% endblock dialog %}

{% block js %}
    $('#classes').addClass('leftA-active');
    var clsName;
    var recordId;
    var postData = {'csrfmiddlewaretoken':'{{ csrf_token }}'};
    if ('{{ usrname }}' != 'root'){      {# 判断是否是管理员身份，不是管理员不能编辑和删除 #}
        $('.del').click(function(){
            {# 打开模态对话框 #}
            $(".shade").removeClass("hide");
            $(".dialog").removeClass("hide");
            {# 设置模态对话框内容 #}
            $(".dlg-title").text("提示");
            $(".icon").addClass(" fa fa-warning fa-lg");
            $(".dlg-text").text("对不起，您没有操作权限！")
        })
        $('.edit').click(function(){
            $(".shade").removeClass("hide");
            $(".dialog").removeClass("hide");
            $(".dlg-title").text("提示");
            $(".icon").addClass(" fa fa-warning fa-lg");
            $(".dlg-text").text("对不起，您没有操作权限！")
        })
    }
    else{
        $('.del').click(function(){
            {# 获取所有同胞节点中的内容 #}
            clsName = $(this).parent().prevAll("td[name='clsname']").text();
            {# 打开模态对话框、确认和取消 #}
            $(".shade").removeClass("hide");
            $(".dialog").removeClass("hide");
            $("#bt-box").removeClass('hide');
            {# 隐藏输入框 #}
            $("#input-box").addClass("hide");
            {# 设置模态对话框内容和样式 #}
            $(".dlg-title").text("提示");
            $(".icon").addClass("fa fa-exclamation-triangle fa-2x");
            $(".dlg-text").text("确定删除"+clsName+"?");
            $(".dlg-text").css("font-size", "16px");
            {# 提交数据时，指明删除事件，并指明删除的是那一行 #}
            postData.op = 'del';
            postData.name = clsName;
        });
        {# 确认点击事件 #}
        $("button[name='confirm']").click(function(){
            {# 隐藏确认、取消和输入框 #}
            $("#bt-box").addClass('hide');
            $("#input-box").addClass("hide");
            {# 定义一个新的变量，接收除安全字段外的所有数据 #}
            var formdata = {};
            if (postData.op != 'del'){
                {# 重置postData #}
                postData = {'csrfmiddlewaretoken':'{{ csrf_token }}'}
                {# 获取到每一个input，并执行下面的函数 #}
                $("#input-box input").each(function(){
                    {# 将input内的内容都添加到formdata中 #}
                    formdata[$(this).attr('name')] = $(this).val()
                })
                {# 定义一个变量用来接收老师信息 #}
                var teachers = [];
                {# 获取到select中被选中的每一个option，并执行下面的函数 #}
                $("select[name='teachers'] option:selected").each(function(){
                    {# 将option中的内容都添加到teachers列表中 #}
                    teachers.push($(this).text())
                })
                {# 将老师信息和ID号添加到formdata中 #}
                formdata.teachers = teachers;
                formdata.id = recordId;
                {# 指明是编辑事件 #}
                postData.op = 'editClasses';
                {# 将formdata格式化成字符串并添加到postData中，此时postData = {'csrfmiddlewaretoken':'{{ csrf_token }}',formdata} #}
                {# formdata中包含全部的信息，这样就避免了安全字符串被格式化 #}
                postData.formdata = JSON.stringify(formdata);
            }
            {# 提交数据 #}
            $.post("/clsoperation/",postData,function(data){
                if (data=='OK'){
                    $(".icon").removeClass("fa fa-exclamation-triangle fa-2x");
                    $(".icon").addClass("fa  fa-check-circle-o fa-2x");
                    $(".dlg-text").text("操作成功");
                    {# 点击叉号时自动刷新页面 #}
                    $(".closedlg").click(function(){
                        window.location.reload();
                    });
                }
                else{
                    $(".dlg-text").text("操作失败");
                }
            })
        });
        {# 点击取消事件 #}
        $("button[name='cancle']").click(function(){
            {# 隐藏模态对话框 #}
            $(".shade").addClass("hide");
            $(".dialog").addClass("hide");
        });
        {# 点击编辑事件 #}
        $(".edit").click(function(){
            {# 打开模态对话框、确认、取消、input #}
            $(".shade").removeClass("hide");
            $(".dialog").removeClass("hide");
            $("#bt-box").removeClass("hide");
            $("#input-box").removeClass("hide");
            {# 设置模态对话框内容 #}
            $(".dlg-title").text("请填写信息");
            $(".dialog").css('height','300px');
            $(".icon").removeClass("fa fa-exclamation-triangle fa-2x");
            $(".dlg-text").text("");

            clsName = $(this).parent().prevAll("td[name='clsname']").text();
            postData.op = 'getTeacher';
            postData.name = clsName;
            $.post("/clsoperation/",postData,function(data){
                {# 将获取的数据转换成json对象 #}
                var obj = JSON.parse(data)
                {# 清空select中option的内容 #}
                $("select[name='teachers']")[0].options.length = 0
                {# 遍历获取数据中的老师列表，并将其写入创建的每个option中 #}
                for (var i in obj.teachers){
                    option = document.createElement('option')
                    option.innerHTML = obj.teachers[i]
                    $("select[name='teachers']").append(option)
                }
                {# 获取ID号 #}
                recordId = obj.id
            })
            {# 将表格中的内容填入input框中 #}
            $(this).parent().prevAll().each(function(){
                $("input[name="+$(this).attr('name')+"]").val($(this).text())
            })
        });
    }
{% endblock js %}